<template>
  <article class="ar-content">
    <!-- <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i>进度</el-breadcrumb-item>
                <el-breadcrumb-item>列表</el-breadcrumb-item>
            </el-breadcrumb>
    </div>-->
    <div style="line-height:40px">
      <div
        style="height:40px;width:40px;border-radius:100%;background:#BAD4EF;color:#fff;line-height:40px;text-align:center;display:inline-block"
      >
        <i class="el-icon-tickets"></i>
      </div>
      <span style="font-size:18px;font-weight:bold;color:#444;">&nbsp;项目列表</span>
    </div>
    <div class="handle-box">
      <el-button size="small" @click="exportAll">全部导出</el-button>
    </div>
    <div class="card-list">
      <el-table :data="tabelData" style="width:100%" :border="true">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="project_name" label="项目名称" width="300"></el-table-column>
        <el-table-column prop="plan_investment" label="进度计划完成投资(万元)" header-align="left"	 align="right"></el-table-column>
        <el-table-column prop="month_cumulative_investment" label="累计完成投资(万元)" header-align="left" align="right"></el-table-column>
        <el-table-column prop="month_investment" label="单月完成投资(万元)" header-align="left" align="right"></el-table-column>
        <el-table-column label="操作" align="center" width="100">
          <template slot-scope="scope">
            <i
              class="el-icon-document caozuo"
              title="详情"
              @click="handDetail(scope.row.pkid)"
              style="width: 50px;height:30px;line-height:30px"
            >详情</i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-div">
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :page-sizes="[10]"
        layout="total, sizes,prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog
      title="进度详情"
      :visible.sync="infoDisable"
      v-if="infoDisable"
      width="1280px"
      top="100px"
    >
      <MonthProgressInfo :pkid="pkid"></MonthProgressInfo>
    </el-dialog>
  </article>
</template>

<script>
import bus from "../../assets/bus.js";
import MonthProgressInfo from "./MonthProgressInfo.vue";
import { loginUrl } from "../tool/Global/app-config.js";
import {
  logoutToLogin,
  queryProMonthScheduleByTime,
  exportMonthData,
  queryProjectdetailByPkid
} from "../tool/Global/app-mgr.js";
//修改为监测经协系统是否已经登陆
import { apiGetUserInfo } from "../tool/Global/app-login-module.js";
import date_formate from "../tool/Global/dateutil.js";
var params = {
  pageindex: 1,
  pagesize: 10,
  time: null,
  // prjName: "",
  prjname:""
};
export default {
  components: {
    MonthProgressInfo
  },
  data: function() {
    return {
      tabelData: null,
      total: 0,
      infoDisable: false,
      pkid: null
    };
  },
  mounted: function() {
    this.busEvent();
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    if (month < 10) {
      month = "0" + month;
    }
    params.time = year + "/" + month;
    this.queryProMonthScheduleByTime();
  },
  methods: {
    getUser() {
      let self = this;
      apiGetUserInfo()
        .then(res => {
          let userInfo = res.data.user;
          if (userInfo.status) {
            var bol = false;
            YanAnAPP.managerId.every(function(item) {
              if (userInfo.sys_role == item) {
                bol = true;
                return false;
              }
            });

            if (bol) {
            } else {
              self.$message.error("不是管理用户，请重新登录");
              logoutToLogin().then(function() {
                window.location.href =
                  GeoAPP.Sites.Cas + "/logout?service=" + loginUrl;
              });
            }
          } else {
            self.$message.error("请先登录");
            window.location.href = loginUrl;
          }
        })
        .catch(e => {
          self.$message.error("请先登录");
          window.location.href = loginUrl;
        });
    },
    queryProMonthScheduleByTime() {
      let self = this;
      queryProMonthScheduleByTime(params).then(function(result) {
        self.total = result.data.data.total;
        self.tabelData = result.data.data.datalist;
      });
    },
    exportAll() {
      var pams = {
        dateMonth: params.time
      };
      exportMonthData(pams).then(function(result) {});
    },
    handDetail(id) {
      this.pkid = id;
      this.infoDisable = true;
    },
    handleCurrentChange(val) {
      params.pageindex = val;
      this.queryProMonthScheduleByTime();
    },
    handleSizeChange(val) {
      params.pagesize = val;
      this.queryProMonthScheduleByTime();
    },
    busEvent() {
      let self = this;
      bus.$on("timeChange", function(val, name) {
        params.time = val;
        // params.prjName = name;
        params.prjname = encodeURIComponent(name);
        params.pageindex = 1;
        self.queryProMonthScheduleByTime();
      });
    }
  }
};
</script>

<style scoped>
.ar-content {
  height: 100%;
  word-wrap: break-word;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  margin: 0 auto;
  background: #f5f5f5;
  border: 1px solid #ccc;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
  margin-right: 10px;
}

.del-button {
  color: #fa5555;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.card-div {
  width: 340px;
  float: left;
  margin-left: 20px;
  margin-bottom: 20px;
}

.card-list {
  overflow-y: auto;
  position: relative;
  margin-bottom: 10px;
}

.handle-box {
  /* margin-bottom: 20px; */
  margin-top: 15px;
  height: 40px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.pagination-div {
  text-align: right;
}
.importFile {
  display: inline-block;
  margin-left: 9px;
}
.caozuo:hover {
  color: #fff;
  cursor: pointer;
  background-color: #409eff;
}
*::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #eee;
}
*::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  /*-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.1);*/
  border-radius: 2px;
  background: #f5f5f5;
}
</style>
<style>
.thColor {
  color: #409eff;
}
.el-table thead{
   color:#555 
}
.tableHead {
  text-align: center;
}
</style>
